<template>
  <div class="goods">
    <!-- 头部导航栏 -->
    <top-nav title="商品详情" tnName=""></top-nav>
    <!-- 商品轮播图片 -->
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="thumb">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.title }}</div>
        <div class="goods-price">{{ formatPrice(goods.price) }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="10">运费：{{ goods.express }}</van-col>
        <van-col span="14">剩余：{{ goods.remain }}</van-col>
      </van-cell>
    </van-cell-group>
    <!-- 详情内容 -->
    <van-cell-group class="goods-cell-group">
      <van-cell>
        {{goods.detail}}
      </van-cell>
    </van-cell-group>

    <!-- 功能按钮 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" @click="sorry">
        客服
      </van-goods-action-icon>
      <van-goods-action-icon icon="cart-o" :badge="num" @click="onClickCart">
        购物车
      </van-goods-action-icon>
      <van-goods-action-button type="warning" @click="addCart">
        加入购物车
      </van-goods-action-button>
      <van-goods-action-button type="danger" @click="buyNow">
        立即购买
      </van-goods-action-button>
    </van-goods-action>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';
  export default {
    components: {
      TopNav,
    },
    data() {
      return {
        goods: {
          prductId:-1,
          title: '',
          price: '',
          express: '免运费',
          remain: '',
          thumb: [],
          detail: '0',
        },
        num: ''
      };
    },
    methods: {
      // 价格处理
      formatPrice() {
        return '¥' + (this.goods.price / 1).toFixed(2);
      },
      onClickCart() {
        if (this.$store.state.us == -1) {
          this.$router.push('/login');
        } else {
          this.$router.push('/cart');
        }
      },
      buyNow(){
        this.$toast('暂无后续逻辑~');
      },
      sorry() {
        this.$toast('暂无后续逻辑~');
      },
      addCart() {
        // 判断用户是否登录
        if(this.$store.state.us == -1){
          this.$router.push("/login");
        }else{
          // 将商品加入购物车
          this.axios.get("/rlg/cart/add?pid=" + this.prductId+"&num=1").then((rs) => {
            if (rs.data.code == 200) {
              this.$toast.success("添加购物车成功！")
            } else {
              this.$toast.fail(rs.data.msg);
            }
          });

          // 获取当前登录用户购物车中选择商品数量
          this.axios.get("/rlg/cart/selectchecked").then((rs) => {
            if (rs.data.code == 200) {
              this.num = rs.data.data.total;
            } else {
              this.$toast.fail(rs.data.msg);
            }
          });

        }

      }
    },
    created() {
      // 页面加载，就立刻获取当前商品数据并渲染
      this.prductId = this.$route.params.pid;
      // 将当前商品ID暂存到状态管理内
      if(this.$store.state.pid == -1){
        this.$store.commit('setPid',this.prductId);
      }
      // 根据商品ID查询对应商品数据
      this.axios.get("/rlg/product/pxq?pid=" + this.$store.state.pid).then((rs) => {
        if (rs.data.code == 200) {
          this.goods.title = rs.data.data.subtitle;
          this.goods.price = rs.data.data.price;
          this.goods.remain = rs.data.data.stock;
          this.goods.thumb = [rs.data.data.mainImage];
          this.goods.detail = rs.data.data.detail;
        } else {
          this.$toast.fail(rs.data.msg);
        }
      });
        // 获取当前登录用户购物车中选择商品数量
        this.axios.get("/rlg/cart/selectchecked").then((rs) => {
          if (rs.data.code == 200) {
            this.num = rs.data.data.total;
          } 
        });
    },
  };
</script>

<style lang="less">
  .van-goods-action {
    bottom: 50px !important;
  }

  .goods {
    padding-bottom: 50px;

    &-swipe {
      img {
        width: 100%;
        display: block;
      }
    }

    &-title {
      font-size: 16px;
    }

    &-price {
      color: #f44;
    }

    &-express {
      color: #999;
      font-size: 12px;
      padding: 5px 15px;
    }

    &-cell-group {
      margin: 15px 0;

      .van-cell__value {
        color: #999;
      }
    }

    &-tag {
      margin-left: 5px;
    }
  }
</style>
